<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 抓div元素   心主体 */
			div{
				width: 200px;
				height: 200px;
				background-color: #ff5977;
				/* 自适应居中 */
				margin: 300px auto;
				/* 转换属性：旋转 */
				transform: rotate(135deg);
				/* 透明度属性：属性值  0~1 范围值*/
				opacity: .8;
				/* 滤镜属性：光晕：下阴影 
				drop-shadow(X值 Y值 模糊范围 模糊颜色)
				*/
				filter: drop-shadow(0 0 50px #ff5977);
				/* 2.动画属性:关键帧名称 过渡时间 过渡方式 无限循环*/
				animation: heart .8s linear infinite;
			}
			/* ③伪类选择器：给元素附加上效果的选择器 
			语法：div:hover{}  当鼠标悬停到div上 实现的【样式】效果
			需求：鼠标悬停到中间心位置改成圆
			选择器:before   在元素之前添加文本，通常与content:""
			选择器:after    在元素之后添加文本，通常与content:""
			*/
		   /* 伪类选择器div上方增加文本/画圆*/
		   div:before{
			   content: "";/* 行转块 */
			   /* 显示属性
			   display: block;转成块级元素
			   display: inline;转成行级元素
			   display: none;元素消失
			   */
			   display: block;
			   width:200px;
			   height: 200px;
			   background-color: #ff5977;
			   border-radius: 50%;
			   /* 相对定位*/
			   position: relative;
			   left: -100px;
		   }
		   div:after{
		   		content: "";
		   		display: block;
		   		width:200px;
		   		height: 200px;
		   		background-color: #ff5977;
		   		border-radius: 50%;
		   	    position: relative;
				top: -93px;
		   }
		   /* ------------动画--------------*/
		   /* 1.创建关键帧---手翻书*/
		   @keyframes heart{
			   /* 3个画面：①等比例出现，防止跳帧 ②缩小比例 ③放大比例 */
			   0%{
				   /* 转换属性：缩放属性值 
					1表示等比例  
					.8表示缩小0.8倍
					1.2表示放大1.2倍
					transform复合属性：旋转 缩放
					*/
				   transform: rotate(135deg) scale(1);
			   }
			   30%{
				   transform: rotate(135deg) scale(.8);
			   }
			   100%{
				   transform: rotate(135deg) scale(1.2);
			   }
		   }
		
		</style>
	</head>
	<body>
		<!-- 画一颗心   html 1个元素 -->
		<div></div>
		<!-- html5:元素的分类，按照元素的特点分为：
		           ①块元素：可以设置高宽、独占一行，典型块元素：div
				   ②行元素：不可以设置高宽、可以在一行显示，典型行元素：span
				      文本内容属于行元素
				   ③行内块元素：可以设置宽高、可以在一行内显示，典型行内块元素：img
				   
				   
		 -->
		 <!-- 音乐 -->
		 <audio src="renxi.mp3" autoplay loop></audio>
	</body>
</html>